<template>
  <div class>
    
    <div class="card tr mb2">
      <el-tooltip content="显示字段筛选" placement="bottom" effect="light">
        <el-popover placement="bottom" width="200" trigger="click">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
          <el-checkbox-group v-model="showItemList" @change="handleCheckedChange">
            <el-checkbox v-for="(item,key) in allItemList" :key="key" :label="item">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary" circle></el-button>
        </el-popover>
      </el-tooltip>

      <el-tooltip content="展开/收起表单" placement="bottom" effect="light">
      <el-button
        icon="el-icon-search"
        @click="formShow= !formShow"
        size="mini"
        type="primary"
        circle
      ></el-button>
      </el-tooltip>

      <el-tooltip content="下载当前表格数据" placement="bottom" effect="light">
        <el-button icon="el-icon-download" @click="handleDownload" size="mini" type="primary" circle></el-button>
      </el-tooltip>
    </div>

    <div class="card" v-show="formShow">
      <el-form
        size="mini"
        :style="style"
        :model="ruleForm"
        ref="ruleForm"
        inline
        label-width="100px"
        class="demo-ruleForm">
        <my-form-item label="用户名称" prop="userName">
          <el-input size="mini" v-model="ruleForm.userName" placeholder="请输入用户名称"></el-input>
        </my-form-item>
        <my-form-item>
          <el-button size="mini" type="primary" @click="init">查询</el-button>
          <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
        </my-form-item>
      </el-form>
    </div>

    <!--table表格-->
    <el-table ref="dragTable" row-key="id" :data="tableData" border style="width: 100%">
      <el-table-column v-for="(item,index) in showItemList" :key="index" :label="item.name">
        <template slot-scope="scope">
          <template v-if="!item.formatter" >
            <el-tooltip effect="light" :content="scope.row[item.key]" :visible-arrow="false" placement="bottom">
              <span >{{ scope.row[item.key] }}</span>
            </el-tooltip>
          </template>
          <template v-else >
            <el-tooltip effect="light" :content="item.formatter(scope.row, item)" :visible-arrow="false" placement="bottom">
              <span >{{ item.formatter(scope.row, item) }}</span>
            </el-tooltip>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140px" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showLogDialog(scope.$index, scope.row)">查看</el-button>
          <el-button type="primary" size="mini" @click="showLogDialog2(scope.$index, scope.row)">比对</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="card tr">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[ 10, 20,30, 40]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- --------------------------------------------------------查看 -->
    <el-dialog title="变更日志信息" :visible.sync="dialogLogVisible" width="570px">
      <el-form size="mini">
        <my-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="logForm.userName" autocomplete="off"></el-input>
        </my-form-item>
          <my-form-item label="功能ID" :label-width="formLabelWidth">
        <el-input v-model="logForm.funcId" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="功能名称" :label-width="formLabelWidth">
          <el-input v-model="logForm.funcName" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="版本号" :label-width="formLabelWidth">
          <el-input v-model="logForm.version" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="表名称" :label-width="formLabelWidth">
          <el-input v-model="logForm.tabName" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input v-model="logForm.createTime" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="日志内容" :label-width="formLabelWidth">
        <el-input type="textarea" rows="3" v-model="logForm.content" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="之前" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="logForm.beforeChange" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="之后" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="logForm.afterChange" autocomplete="off"></el-input>
        </my-form-item>
          
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLogVisible = false">取 消</el-button>
      </div>
    </el-dialog>


    <!-- --------------------------------------------------------对比------ -->
    <el-dialog title="变更日志记录对比" :visible.sync="dialogLogVisible2" :close-on-click-modal="false" width="300px">
      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content bg-purple">&nbsp;</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">变更前</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">变更后</div></el-col>
      </el-row>

      <el-row :gutter="20" v-for="item in fields" :key="item">
        <el-col :span="8"><div class="grid-content bg-purple">{{commentsMap[item] ? commentsMap[item]: item}}</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">{{beforeMap[item]?beforeMap[item]:empty}}</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">{{afterMap[item]?afterMap[item]:empty}}</div></el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="dialogLogVisible2 = false">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>
      
<script>
import {getLogTypeName,dateFormatter} from "@/pages/log/function.js";

const defaultFormThead = [
  { key: "userName", name: "用户名" },
  { key: "funcId", name: "功能ID" },
  { key: "funcName", name: "功能名称" },
  { key: "content", name: "日志内容"},
  { key: "createTime", name: "创建日期",
    formatter: row => {
      if (row.createTime) {
        return (new Date(row.createTime)).toLocaleString();
      }
      return "";
    } 
  },
  { key: "version", name: "版本号" },
  { key: "tabName", name: "表名称" },
  { key: "beforeChange", name: "之前" },
  { key: "afterChange", name: "之后" },
];

export default {
components: {},
data() {
  return {
    style: {},
    isIndeterminate: false,
    checkAll: true,
    allItemList: defaultFormThead,
    showItemList: defaultFormThead,
    formShow: false,
    total: 0,
    pageSize: 10,
    currentPage: 1,
    tableData: [],
    // 查询form
    ruleForm: {
      userName: '',
      status: '',
    },

    empty: '/',
    // 弹出框
    dialogLogVisible2: false,
    // 字段list
    fields: [],
    // 变更前对象
    beforeMap: {

    },
    // 变更后对象
    afterMap: {
  
    },
    // 字段注解
    commentsMap: {
    },

    logForm: {},
    formLabelWidth: '100px',
    dialogLogVisible: false,

  };
},
computed: {},
watch: {
  offForm: function(v) {
    if (v) {
      this.style = {
        height: "62px",
        overflow: "hidden"
      };
    } else {
      this.style = {
        height: "auto",
        overflow: "hidden"
      };
    }
  }
},
mounted() {
  this.init();
},
methods: {
  handleCheckedChange(value) {
    let checkedCount = value.length;
    this.checkAll = checkedCount === defaultFormThead.length;
    this.isIndeterminate =
      checkedCount > 0 && checkedCount < defaultFormThead.length;
  },
  handleCheckAllChange(val) {
    this.showItemList = val ? defaultFormThead : [];
    this.isIndeterminate = false;
  },

  /**
  * table导出
  */
  handleDownload() {
    this.downloadLoading = true;
    import("@/vendor/Export2Excel").then(excel => {
      const tHeader = [
        "用户名",
        "功能ID",
        "功能名称",
        "日志内容",
        "创建日期",
        "版本号",
        "表名称",
        "之前",
        "之后",
      ];
      const filterVal = [
        "userName",
        "funcId",
        "funcName",
        "content",
        "createTime",
        "version",
        "tabName",
        "beforeChange",
        "afterChange",
      ];
      const data = this.formatJson(filterVal, this.tableData);
      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: "变更日志"
      });
      this.downloadLoading = false;
    });
  },

  /**
    转json
   */
  formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },

  showLogDialog(index, row) {
      this.logForm = {};
      this.logForm.userName = row.userName;

      this.logForm.funcId = row.funcId;
      this.logForm.funcName = row.funcName;
      this.logForm.content = row.content;
      this.logForm.version = row.version;
      this.logForm.tabName = row.tabName;
      this.logForm.content = row.content;
      this.logForm.beforeChange = row.beforeChange;
      this.logForm.afterChange = row.afterChange;
      let col = {};
      col.property = 'createTime';
      this.logForm.createTime = this.dateFormatter(row, col);
      this.dialogLogVisible = true;
    },
  
  showLogDialog2(index, row) {
      // 表名
      if (!row.tabName) {
        this.$message({
          message: "表名不成在！",
          type: "error"
        });
        return;
      }
      let tableName = row.tabName;

      let idx = row.tabName.indexOf('(');
      if (idx != -1) {
        tableName = tableName.substring(idx + 1, tableName.length - 1);
      }
      // 变更字段
      this.fields = [];
      // 变更前
      this.beforeMap = {};
      if (row.beforeChange) {
        this.beforeMap = JSON.parse(row.beforeChange);
        this.mapToArr(this.beforeMap);
      }
      // 变更后
      this.afterMap = {};
      if (row.afterChange) {
        this.afterMap = JSON.parse(row.afterChange);
        this.mapToArr(this.afterMap);
      }
      this.getColComments(tableName);
    },
  getLogTypeName(row, column) {
    return getLogTypeName(row, column);
  },
  dateFormatter(row, column) {
    return dateFormatter(row, column);
  },
  sizeChange(pageSize) {
    this.pageSize = pageSize;
    this.init();
  },
  currentChange(currentPage) {
    this.currentPage = currentPage;
    this.init();
  },
  init() {
    let params = {
      pageNum: this.currentPage,
      pageSize: this.pageSize,
      logType: '4',
      ...this.ruleForm
    };
    this.$api.formPost( '/api/log/collect/doGetList2', params)
      .then(res => {
        if (res.retHead.code === "0000000") {
          this.tableData = res.retBody.list;
          this.total = res.retBody.total;
          this.currentPage = res.retBody.pageNum;
        }
      });
  },
  /**
   * 获取字段注解
   */
  getColComments(tableName) {
    let params = {};
    params.tableName = tableName;
    this.$api.formPost( '/api/log/collect/doGetColComments', params)
      .then(res => {
        this.commentsMap = {};
        if (res.retHead.code === "0000000") {
          this.commentsMap = res.retBody;
          this.dialogLogVisible2 = true;
        }
      });
  },
  /**
   * 遍历map，转成list
   */
  mapToArr(map) {
    if (this.fields.length != 0) {
      return;
    }
    for(var key in map){
      this.fields.push(key);
    }
  },

  resetForm(formName) {
    this.$refs[formName].resetFields();
  }
},
created() {}
};
</script>
<style lang='scss' scoped>
.el-dialog__body .el-textarea__inner {
  width: 94%;
}

.el-dialog__body .el-form-item {
	display: inline-block;
}

.el-dialog__body .el-form-item:nth-last-child(-n+3) {
	display: block;
}
.el-col.el-col-8{
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 6px 10px;
  
}
.el-row:nth-of-type(2n-1){
  background-color: #f5f5f5;
}
.el-row:not(:nth-of-type(1)):hover{
  background-color: #c9d3df;
}
.grid-content.bg-purple{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-row:last-of-type{
  border-bottom: 1px solid #ccc;
}


</style>